<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <script src="https://cdn.bootcss.com/jquery/1.10.0/jquery.min.js"></script>
  <style type="text/css">
        input[type='checkbox']+label{
            /*将label设置position为非static,为::before伪元素的absolute定位作参考*/
            position:relative;
        }

        input[type='checkbox']+label.disabled::before{
            content:"";
            position:absolute;
            top:2px;
            left:-17px;
            width:16px;
            height:16px;
            display:inline-block;
        }
</style>
<script>
$(document).ready(function () {
	$('input[type="checkbox"]').focus(function(){
		$('#txtDisabled').focus();
	})
});
</script>
</head>

<body>
<pre>
用户要求，checkbox在不可用时，其样式和可用状态下相同，即：不可用状态下，checkbox的背景也是白底，而不是灰底。
在本例中，1)通过给checkbox后面的label添加::before伪元素来覆盖checkbox，使得checkbox无法被点击
           2)checkbox获得焦点时，立即将焦点移到txtDisabled，避免用户通过键盘操作checkbox
          
缺点：1.label不能用for属性与checkbox建立关联，否则，点击label相当于点击到checkbox

</pre>
<input type="text" id="txtDisabled" style="width:0;height:0"/>
<input type="checkbox" checked><label>enabled</label><br />
<input type="checkbox" checked><label class="disabled">checked disabled</label><br />
<input type="checkbox" ><label class="disabled">unchecked disabled</label><br />
<hr/>
<pre>
扩展：label用for属性关联到checkbox,
        给label添加不透明的::before伪元素，通过::before伪元素画一个checkbox覆盖原checkbox
		由于label关联了checkbox,点击伪元素时相当于点击了checkbox
		这样就实现了给chechbox替换样式的目的
</pre>
</body>
</html>